<template>
  <button @click="onClick">点击我</button>
  <button @click="addAge">增加年龄</button>
  <button @click="addHobbies">新增爱好</button>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
const person = reactive({
  name: '张三',
  age: 18,
  friend: {
    name: '李四',
    age: 20,
    hobbies: ['打游戏', '看电影']
  }
})
const onClick = () => {
  console.log('点击了')
  alert('点击了我')
}
const addAge = () => {
  person.age++
  console.log(person.age)
}
const addHobbies = () => {
  person.friend.hobbies.push('看书')
  console.log(person.friend.hobbies)
}
</script>
